import { Component, lazy } from 'react'
import '../assets/main.css'

// 导入路由依赖
import {
  Route,
  NavLink
} from 'react-router-dom'
// 懒加载导入路由
const Home = lazy(() => import('./Home'))
const Goods = lazy(() => import('./Goods'))
const Cart = lazy(() => import('./Cart'))
const Ucenter = lazy(() => import('./Ucenter'))

export default class Main extends Component {
  render () {
    return (
      <div>
        <h2>布局页面(内部包含二级路由)</h2>
        <Route path="/main/home" component={Home}></Route>
        <Route path="/main/goods" component={Goods}></Route>
        <Route path="/main/cart" component={Cart}></Route>
        <Route path="/main/ucenter" component={Ucenter}></Route>

        <div className="nav">
          <NavLink to="/main/home">首页</NavLink>
          <NavLink to="/main/goods">商品</NavLink>
          <NavLink to="/main/cart">购物车</NavLink>
          <NavLink to="/main/ucenter">个人中心</NavLink>
        </div>
      </div>
    )
  }
}
